<template>
  <Modal
    v-model:visible="visibleModule"
    width="500px"
    height="auto"
    class="node-user"
    :title="selectUserItem.text"
    :resize="false"
    :maximizable="false"
    :cancel-button="{ text: '关闭' }"
    :header-style="{ height: '50px' }"
    :body-style="{ padding: 0 }"
    @close="cancelModal"
  >
    <div v-if="loading" v-loading="loading" style="height: 560px"></div>
    <div v-else class="node-user-context">
      <Tabs
        v-if="userDatas.length > 1"
        v-model:activeKey="activeId"
        class="node-user-context-tabs"
        type="card"
        @change="doTabsChange"
      >
        <TabsPanel
          v-for="item in userDatas"
          :key="item.assignmentConfigType"
          :tab="item.assignmentConfigTypeName"
        ></TabsPanel>
      </Tabs>
      <Tree
        v-if="userDatas.length > 0"
        ref="$tree"
        height="500"
        size="mini"
        :store="treeStore"
        class="node-user-context-tree"
        :tree-config="{
          rowField: 'id',
          parentField: 'parentId',
          textField: 'text',
        }"
      >
      </Tree>
      <div v-else style="height: 500px; display: flex; align-items: center; justify-content: center"
        >暂无数据</div
      >
    </div>
  </Modal>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, ref, nextTick } from 'vue';
  import { Modal, Tabs, Tree, Data } from '@jecloud/ui';
  import { getNodeAssignee } from '@/api/monitoring/index';
  export default defineComponent({
    name: 'WorkflowNodeUser',
    components: { Modal, Tabs, TabsPanel: Tabs.TabPane, Tree },
    props: {
      dataInfo: Object,
      beanId: String,
      selectUserItem: Object,
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visibleModule: true,
        userDatas: [],
        activeId: '',
        loading: true,
      });
      const $tree = ref();
      const treeStore = Data.Store.useTreeStore({ data: [] });
      const methods = {
        // 弹窗关闭调用
        cancelModal: () => {
          emit('closeModal');
        },
        // tabs 切换面板
        doTabsChange: (activeKey) => {
          state.userDatas.forEach((item) => {
            if (item.assignmentConfigType == activeKey) {
              treeStore.loadData(item.user);
              nextTick(() => {
                setTimeout(() => {
                  $tree.value.setAllTreeExpand(true);
                }, 500);
              });
            }
          });
        },
      };
      const initNodeData = () => {
        const params = Object.assign(props.dataInfo, {
          beanId: props.beanId,
          target: props.selectUserItem.target,
          operationId: 'taskSubmitOperation',
          prod: props.dataInfo.pd,
          taskId: props.selectUserItem.taskId,
          adjust: 1,
        });
        getNodeAssignee(params).then((data) => {
          state.userDatas = data.nodeAssigneeInfo[0].users;
          if (state.userDatas.length > 0) {
            state.activeId = state.userDatas[0].assignmentConfigType;
            treeStore.loadData(state.userDatas[0].user);
            nextTick(() => {
              setTimeout(() => {
                $tree.value.setAllTreeExpand(true);
              }, 500);
            });
          }
          state.loading = false;
        });
      };
      onMounted(() => {
        initNodeData();
      });
      return { ...toRefs(state), ...methods, treeStore, $tree };
    },
  });
</script>
<style lang="less" scoped>
  .node-user {
    &-context {
      padding: 10px 40px 20px 40px;
      height: 100%;
    }
  }
</style>
<style lang="less">
  .node-user {
    .node-user-context-tabs {
      border-width: 1px 1px 0 0;
      height: 40px;
      border-color: @border-color-split;
      border-style: solid;
      .ant-tabs-nav {
        margin: 0;
        .ant-tabs-tab {
          border-top: 0;
          margin-top: -1px;
          border-radius: 0;
          padding: 7px 15px;
          & + .ant-tabs-tab {
            margin-left: -1px !important;
          }

          &.ant-tabs-tab-active {
            background-color: @primary-2;
            border-bottom-color: @border-color-split;
          }
        }
      }
      &.fork-nodes {
        .ant-tabs-nav .ant-tabs-tab {
          padding: 7px 40px;
        }
      }
    }
    .node-user-context-tree {
      .vxe-table--body-wrapper.body--wrapper {
        border: 1px solid @border-color-split;
        border-top: 0;
      }
    }
  }
</style>
